<template>
  <div class="op-container">
    <button class="btnStyle" @click="getUserList">用户管理</button>

    <div class="Related_container">
      <div class="set_box">
        <el-switch
          v-model="payWayState"
          :disabled="!authorityHandle(161)"
          style="display: block; margin-right:20px;margin-bottom:20px;"
          active-color="#3b425d"
          inactive-color="#E9EBF2"
          active-text="打开"
          inactive-text="关闭"
          :active-value="1"
          :inactive-value="0"
          @change="payWayStateChange()"
        />
        <div v-for="(item, index) in chargeSetting.itemList" :key="item.id" class="Recharge_Data">
          <div class="Recharge_Data_box">
            <span>消费档位:</span>
            <el-input v-model.number="item.rechargeAmount" :readonly="!authorityHandle(161)" style="margin-right:20px" />
            <span>消费赠送:</span>
            <el-input v-model.number="item.givePercent" :readonly="!authorityHandle(161)" /> %
          </div>
          <div class="operation">
            <i v-if="authorityHandle(161)" v-show="index != 0" class="el-icon-remove" @click="Delete(item.id)" />
            <i
              v-if="authorityHandle(161)"
              v-show="index == chargeSetting.itemList.length - 1"
              class="el-icon-circle-plus"
              @click="newly_added()"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <button v-if="authorityHandle(161)" class="btnStyle" @click="save">保存</button>
    </div>
    <!-- 添加"商户号 弹窗 -->
    <k-dialog
      :show-hide.sync="payStepSettingDialog"
      :modal-append-to-body="false"
      :append-to-body="true"
      title="添加可支付用户"
      class="addBox-dialog"
      :two-btn="false"
      @click="payStepSettingDialog = false"
    >
      <el-form :inline="true" label-width="auto">
        <el-form-item label="用户手机号">
          <el-input
            v-model="chargeParam.mobile"
            clearable
            show-word-limit
            @keyup.enter.native="onQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button :disabled="!chargeParam.mobile" type="primary" @click="onQuery">查询</el-button>
        </el-form-item>
      </el-form>
      <br>
      <div class="QueryStyle">
        <div v-for="item in QueryUser" :key="item.id" class="userIcon">
          <div class="userItem">
            <div class="img_box">
              <img :src="item.userIcon" alt="" srcset="">
              <span> {{ item.mobile }}</span>
            </div>
            <el-tooltip class="item" effect="dark" content="点击添加" placement="top-start">
              <el-button icon="el-icon-plus" circle @click="add(item.id, item.mobile)" />
            </el-tooltip>
          </div>
        </div>

      </div>
      <br>
      <el-divider>↓可支付用户↓</el-divider>
      <div class="tagClass">
        <el-tag v-for="tag in UserList" :key="tag.userId" closable @close="handleClose(tag)">
          {{ tag.userMobile }}
        </el-tag>
      </div>
    </k-dialog>
  </div>
</template>

<script>
import { getSettingItem, getRechargeStatus, delZfbUser, getZfbUser, addZfbUser, upDateRechargeStatus, saveSettingItem } from '@/api/settings/paysetting'
import { listUserData } from '@/api/user/user'
export default {
  components: {},
  data() {
    return {
      payType: 2,
      payWayState: 1,
      chargeSetting: { // 首充赠送
        id: 2,
        itemList: [{
          rechargeAmount: undefined, // 消费挡位',
          givePercent: undefined // 消费赠送'
        }]
      },
      // 添加手机号
      payStepSettingDialog: false,
      UserList: [],
      chargeParam: {
        mobile: ''
      },
      // 远端的数据
      QueryUser: [],
      loading: false
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getSetting()
    this.getPayState()
  },
  mounted() { },
  methods: {
    // 保存数据
    async add(userId, userMobile) {
      await addZfbUser({ userId, userMobile }).then(res => {
        if (res.data.success) {
          this.$message.success('保存成功')
          this.chargeParam.mobile = ''
          this.QueryUser = []
          this.getUserList()
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    // 保存数据
    onQuery() {
      if (this.chargeParam.mobile.length < 11) return this.$message.error('号码格式错误')
      const parameter = {
        'pager': {
          'pageNo': 1,
          'pageSize': 1
        },
        'mobile': this.chargeParam.mobile
      }
      listUserData(parameter).then((result) => {
        if (!result.data.rows) return this.$message.error('查无此人')
        this.QueryUser = result.data.rows
      })
    },
    // 获取数据
    getSetting() {
      getSettingItem({ 'id': this.payType }).then(res => {
        this.chargeSetting.itemList = res.data
      })
    },
    // 获的有权限的人
    getUserList() {
      getZfbUser().then(res => {
        this.UserList = res.data.data
        this.payStepSettingDialog = true
      })
    },
    // 获的有权限的人
    handleClose(tab) {
      this.$confirm('确定删除此用户?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delZfbUser(tab.id).then(res => {
          if (res.data.success) {
            this.$message.success('删除成功')
            this.getUserList()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    // 获取支付方式开关
    getPayState() {
      getRechargeStatus({ 'id': this.payType }).then(res => {
        this.payWayState = res.data === true ? 1 : 0
        this.$log(res.data, this.payWayState)
      })
    },
    // 支付方式开关
    // wx(1,"微信"),
    // zfb(2,"支付宝"),
    // wxOther(3,"第四方微信"),
    // zfbOther(4,"第四方支付宝");
    payWayStateChange() {
      upDateRechargeStatus({ 'id': this.payType }).then(res => {
        this.$log(res)
      })
    },
    save() {
      saveSettingItem(this.chargeSetting).then(res => {
        this.$message.success('保存成功')
      })
    },
    // 设置新增
    newly_added() {
      this.chargeSetting.itemList.push({
        id: undefined,
        rechargeAmount: undefined, // 消费挡位',
        givePercent: undefined // 消费赠送'
      })
    },
    // 设置删除
    Delete(value) {
      var index = this.chargeSetting.itemList.findIndex(function(item) {
        return item.id === value
      })
      if (index !== -1) {
        this.chargeSetting.itemList.splice(index, 1)
      }
    }
  }
}

</script>
<style lang="scss" scoped>
$mainColor: #3b425d; // 主色调
$disabledColor: #909399; //禁用色
$hoverColor: #1D143C; // 鼠标停留主色调浅色

.addBox-dialog {

  ::v-deep .el-dialog__body {
    width: 578px;
    margin: 20px 40px;
  }

  .tagClass {
    display: flex;
    flex-wrap: wrap;

    ::v-deep .el-tag {
      margin-right: 15px;
      margin-bottom: 15px;
      // .el-tag__close{

      // }
    }
  }

  .QueryStyle {
    .userIcon {
      display: inline-block;
      background-color: #e9ecf3;
      border-radius: 5px;
      padding: 2px 15px;

      .userItem {
        display: flex;
        justify-content: center;
        align-items: center;

        .img_box {
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 15px 0px;

          img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
          }

          span {
            margin: 0 15px;
          }
        }
      }
    }
  }
}

.op-container {
  margin: 20px;

  .Related_container {
    width: 900px;
    height: 500px;
    padding: 60px 0;
    border-radius: 10px;
    border: 1px dashed #ccc;
    margin: 50px auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;

    .el-input__inner:focus {
      border-color: #3b425d
    }

    .set_box {
      width: 500px;
      padding: 0 20px;
      box-sizing: border-box;

      .Recharge_Data {
        width: 100%;
        height: 40px;
        margin-top: 10px;
        display: flex;
        align-items: center;
        color: #000;

        .Recharge_Data_box {
          width: 100%;
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .el-input {
            width: 150px;
            height: 35px;

            input {
              width: 150px;
              height: 35px;
            }
          }

          span {
            font-size: 14px;
            width: 150px;
          }
        }

        .operation {
          width: 12%;
          display: flex;
          justify-content: space-between;

          .el-icon {

            &-circle-plus,
            &-remove {
              font-size: 22px;
              color: #3b425d;
              margin-left: 10px;

            }
          }
        }
      }
    }
  }

  .footer {
    text-align: center;
    margin-top: 30px;
  }
}
</style>
